<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        事件的基本使用：
            1.v-on:事件名可以简写为@事件名，例如@click
            2.事件的回调需要配置在methods中，最终会显示在vm实例中
            3.methods中配置的函数不要写成箭头函数，否则this就不是vm实例了
            4.如果事件函数需要传入多个参数，则需要写成@click="fun($event, a, b, c)", a、b、c是具体的参数；
            如果不需要传入参数，写成@click="fun"，它默认传入参数event；
            但是，不建议写成@click="fun()"
    
    -->
    <div id="root">
        <h1>欢迎{{ name }}</h1>
        <!-- 为按钮绑定单击事件 -->
        <!-- 
            写成showInfo1()，那么下面定义的函数不能在括号中传入event；
            如果写成showInfo，则可以在括号中传入event
         -->
        <button v-on:click="showInfo1($event)">点我提示信息1</button>
        <!-- v-on:click 可以简写为@click-->
        <!-- <button @click="showInfo2">点我提示信息2</button> -->
        <!-- 传入参数的写法 -->
        <button @click="showInfo2($event, 666)">点我提示信息2</button>
        <!-- 直接传入一个参数，这种写法最简便 -->
        <button @click="showInfo3(999)">点我提示信息3</button>

    </div>

    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: "#root",
            data: {  // data中定义数据
                name: "xiaoming"
            },
            methods: {  // methods中书写方法
                showInfo1(event) {  // 这里即使不书写event，函数中也会默认传入一个参数event事件对象
                    // innerHTML和innerText在这里效果差不多
                    console.log(event.target.innerHTML);  // PointerEvent
                    console.log(this);  // Vue实例
                    alert("111");
                },
                showInfo2(event, number) {
                    console.log(event);  // event是事件对象
                    console.log(number);  // number是传入的参数

                },
                showInfo3(n) {
                    console.log(event);
                    console.log(n);
                }
            
            }
        })
    </script>
</body>
</html>